<!--  -->
<template>
    <!-- 正文 -->
    <div style="padding-bottom: 42px;">
        <van-form @submit="sureButtonClick" @failed="failedMethod">

            <!-- 头部 -->
            <div class="font15 mt10">
                <div class="pl10">
                    <span class="titletext ">{{ headerTitle }}</span>
                </div>

                <div class="redtext mt10 mb5 font13 pl10">
                    <span>提示：该表单带*字段都为必填项</span>
                </div>

                <div class="bcolor-e" style="height: 8px;"></div>
            </div>


            <!-- 干系人 -->
            <van-cell-group v-if="params.pushType == 'stakeholder'">


                <van-field readonly required name="stakeholderName" :value="mFromdata.stakeholderName" label="姓名:"
                    label-width="3em" :rules="[{ required: formEditable, message: '请选择干系人' }]">
                    <template #button>
                        <el-button size="small" type="primary" icon="el-icon-search"
                            @click="stakeholderNameShowPopupView = true">选择人员</el-button>
                    </template>
                </van-field>
                <page-province-user-list v-if="stakeholderNameShowPopupView"
                    @update-flag="stakeholderNameShowPopupView = false" @select-item="selectedUsersHandle" :maxNum="1" />

                <van-field readonly required name="stakeholderOrg" :value="mFromdata.stakeholderOrg" label="单位:"
                    label-width="3em" />
                <van-field readonly required name="stakeholderCode" :value="mFromdata.stakeholderCode" label="账号:"
                    label-width="3em" />
                <van-field readonly required name="stakeholderTel" :value="mFromdata.stakeholderTel" label="电话:"
                    label-width="3em" />
                <van-field readonly required name="stakeholderEmail" :value="mFromdata.stakeholderEmail" label="邮箱:"
                    label-width="3em" />

                <van-field readonly clickable required v-model="mFromdata.stakeholderRole" label="角色:" placeholder="请选择"
                    label-width="3em" :right-icon="formEditable ? 'arrow' : ''" @click="showPopupView = formEditable"
                    :rules="[{ required: formEditable, message: '请选择角色' }]" />
                <van-popup v-model="showPopupView" position="bottom" get-container="body">
                    <van-picker show-toolbar :columns="['客户经理', '解决方案经理', '项目经理', '项目责任人', '客户联系人']"
                        @confirm="stakeholderRoleConfirm" @cancel="showPopupView = false">
                    </van-picker>
                </van-popup>
                <van-field :readonly='!formEditable' required name="stakeholderDuty" v-model="mFromdata.stakeholderDuty"
                    label="主要职责:" label-width="5em" :rules="[{ required: formEditable, message: '请填写主要职责' }]" />
            </van-cell-group>


            <!-- 合同交付进度计划 -->
            <van-cell-group v-else-if="params.pushType == 'contractDeliveryInfo'">

                <van-field readonly required name="deliveryPhase" :value="mFromdata.deliveryPhase" label="交付阶段:"
                    label-width="5em" />
                <van-field readonly required name="deliveryDate" :value="mFromdata.deliveryDate" label="合同计划交付年月:"
                    label-width="9em" />

                <van-field readonly required :right-icon="formEditable ? 'arrow' : ''" name="contractArrangePayTime"
                    v-model="mFromdata.contractArrangePayTime" label="合同约定交付时间:" label-width="9em"
                    @click="showPopupView = formEditable" />
                <van-popup v-model="showPopupView" position="bottom" get-container="body">
                    <van-datetime-picker v-model="currentDate" :formatter="formatter" type="date"
                        @confirm="contractArrangePayTimeOnComfirm" @cancel="showPopupView = false" />
                </van-popup>
                <van-field readonly required autosize type="textarea" name="contractSchedule"
                    :value="mFromdata.contractSchedule" label="合同正文进度条款:" label-width="9em" />
                <van-field readonly name="contractDeadline" :value="mFromdata.contractDeadline" label="合同工期要求(天):"
                    label-width="10em" />
                <van-field readonly name="rests" :value="mFromdata.rests" label="其他:" label-width="3em" />
            </van-cell-group>

            <!-- 合作伙伴 -->
            <van-cell-group v-else-if="params.pushType == 'partnerInfo'">

                <van-field :readonly='!formEditable' required name="partnerWarehouseId"
                    v-model="mFromdata.partnerWarehouseId" label="合作伙伴编码:" label-width="7em"
                    :rules="[{ required: formEditable, message: '请输入合作伙伴编码' }]" />
                <van-field :readonly='!formEditable' required name="partnerName" v-model="mFromdata.partnerName"
                    label="合作伙伴名称:" label-width="7em" :rules="[{ required: formEditable, message: '请输入合作伙伴名称' }]" />
                <van-field :readonly='!formEditable' required name="partnerContactPerson"
                    v-model="mFromdata.partnerContactPerson" label="合作伙伴联系人:" label-width="8em"
                    :rules="[{ required: formEditable, message: '请输入合作伙伴联系人' }]" />
                <van-field :readonly='!formEditable' required name="partnerContact" v-model="mFromdata.partnerContact"
                    label="合作伙伴联系方式:" label-width="9em" :rules="[{ pattern, message: '请输入有效的电话号码' }]" />


                <van-field readonly required :right-icon="formEditable ? 'arrow' : ''" name="partnerSelectionTime"
                    v-model="mFromdata.partnerSelectionTime" label="合作伙伴甄选时间:" label-width="9em"
                    @click="showPopupView = formEditable" />
                <van-popup v-model="showPopupView" position="bottom" get-container="body">
                    <van-datetime-picker v-model="currentDate" :formatter="formatter" type="date"
                        @confirm="partnerSelectionTimeOnComfirm" @cancel="showPopupView = false" />
                </van-popup>

                <van-field :readonly='!formEditable' required name="purchaseName" v-model="mFromdata.purchaseName"
                    label="采购名称:" label-width="5em" :rules="[{ required: formEditable, message: '请填写采购名称' }]" />
            </van-cell-group>

            <!-- 到期提醒 -->
            <van-cell-group v-else-if="params.pushType == 'push'">

                <van-field readonly required name="projectID" v-model="mFromdata.projectID" label="项目编号:"
                    label-width="6em" />
                <van-field readonly required name="deliverId" v-model="mFromdata.deliverId" label="交付编号:"
                    label-width="6em" />

                <van-field :readonly='!formEditable' required name="remindInfo" v-model="mFromdata.remindInfo"
                    label="提醒事宜:" label-width="5em"
                    :rules="[{ required: formEditable, message: '请填写提醒事宜并且至多输入 1000 个字符' }]" />


                <van-field readonly required :right-icon="formEditable ? 'arrow' : ''" name="projectDelDate"
                    v-model="mFromdata.projectDelDate" label="项目交付时间:" label-width="7em"
                    @click="showPopupView = formEditable" />
                <van-popup v-model="showPopupView" position="bottom" get-container="body">
                    <van-datetime-picker v-model="currentDate" :formatter="formatter" type="datetime"
                        @confirm="projectDelDateOnComfirm" @cancel="showPopupView = false" />
                </van-popup>

                <van-field :readonly='!formEditable' required name="remark" v-model="mFromdata.remark" label="备注:"
                    label-width="3em" :rules="[{ required: formEditable, message: '请填写备注并且至多输入 1000 个字符' }]" />

            </van-cell-group>


            <!-- 流转下一步 -->
            <div v-if="formEditable" class="footer">
                <van-button block type="info" native-type="submit"
                    style="display: inline-block; width: 100%; border: 0px solid #60a9ec">{{ sureButtonTitle
                    }}</van-button>
            </div>
        </van-form>

    </div>
</template>


<script>

import { Notify, Toast } from "vant";

import moment from 'moment'
import jTool from "../../assets/js/jHelper";
import { createDICTProjectAccRecordRmind, findByUsername } from "@/api/dictapi";
import pageProvinceUserList from "@/components/page_province_user_list/index.vue";


export default {
    data() {
        return {

            pattern: /^1[3-9]\d{9}$/, /// 手机号正则表达

            params: {},
            mFromdata: {
                contractArrangePayTime: '',
                partnerSelectionTime: '',
                projectDelDate: '',

                stakeholderRole: '',
                stakeholderName: '',
                stakeholderOrg: '',
                stakeholderCode: '',
                stakeholderTel: '',
                stakeholderEmail: ''
            },
            


            // stakeholderRoleColumns: [
            //     { label: '客户经理', value: '客户经理' },
            //     { label: '解决方案经理', value: '解决方案经理' },
            //     { label: '项目经理', value: '项目经理' },
            //     { label: '项目责任人', value: '项目责任人' },
            //     { label: '客户联系人', value: '客户联系人' }],


            currentDate: new Date(),
            showPopupView: false,
            stakeholderNameShowPopupView: false,
            
        };
    },

    computed: {


        sureButtonTitle() {
            let type = this.params.pushType;
            if (type == 'stakeholder' || type == 'partnerInfo' || type == 'contractDeliveryInfo') {
                return '确认';
            } else {
                return '验收到期提醒推送';
            }
        },

        headerTitle() {
            let type = this.params.pushType;
            if (type == 'stakeholder') {
                return '干系人.详情';
            }
            else if (type == 'partnerInfo') {
                return '合作伙伴.详情';
            }
            else if (type == 'contractDeliveryInfo') {
                return '合同交付进度计划.详情';
            }
            else {
                return '项目交接.验收到期提醒区域';
            }
        },

        formEditable() {
            return this.params.isDrawup == '1';
        },
    },

    //生命周期--创建完成
    created() {


    },

    beforeRouteLeave(to, from, next) {
        this.params = {};
        next();
    },

    //生命周期--进入
    activated() {


        // 每次进来删除数据 删除缓存
        let formData = this.$route.query.formData;
        this.mFromdata = formData;
        this.params = this.$route.query;
        
        this.showPopupView = false;
        this.currentDate = new Date();
        this.$forceUpdate();


        // 选中人员后 网络请求获取人员信息



    },



    components: {

        pageProvinceUserList,



    },

    //生命周期--挂载完成
    mounted() { },

    //方法调用
    methods: {

        failedMethod(data) {

            console.log('submit fail:', data);
            const errorArr = data.errors;
            const errorObj = errorArr[0];
            const errorMessage = errorObj.message;
            Toast({ type: 'text', message: errorMessage, duration: 1000 });
        },


        /// 年月日 时间格式
        formatter(type, val) {

            if (type === 'year') {
                return `${val}年`;
            } else if (type === 'month') {
                return `${val}月`;
            } else if (type === 'day') {
                return `${val}日`;
            } else if (type === 'hour') {
                return `${val}时`;
            } else if (type === 'minute') {
                return `${val}分`;
            }
            return val;
        },


        // 验收到期提醒 - 项目交付时间
        projectDelDateOnComfirm(value) {

            this.showPopupView = false;

            let projectDelDate = moment(value).format('YYYY-MM-DD HH:mm:ss');
            this.currentDate = projectDelDate;
            this.mFromdata.projectDelDate = projectDelDate;
        },

        // 合同交付进度 - 合同约定交付时间
        contractArrangePayTimeOnComfirm(value) {

            this.showPopupView = false;

            let contractArrangePayTime = moment(value).format('YYYY-MM-DD');
            this.currentDate = contractArrangePayTime;
            this.mFromdata.contractArrangePayTime = contractArrangePayTime;
        },

        // 合作伙伴 - 合作伙伴甄选时间
        partnerSelectionTimeOnComfirm(value) {

            this.showPopupView = false;

            let partnerSelectionTime = moment(value).format('YYYY-MM-DD');
            this.currentDate = partnerSelectionTime;
            this.mFromdata.partnerSelectionTime = partnerSelectionTime;
        },


        // 干系人 - 角色
        stakeholderRoleConfirm(value) {

            this.showPopupView = false;

            this.mFromdata.stakeholderRole = value;
        },

        // 干系人 - 选人回调
        selectedUsersHandle(list) {

            this.stakeholderNameShowPopupView = false;
            let user = list[0];
            if (user) {

                this.requestStakeholderUserInfo(user.id);
            }
        },

        // 干系人 - 人员信息
        requestStakeholderUserInfo(username) {

            Toast.loading({ message: "获取人员信息", forbidClick: false });
            findByUsername(username).then((result) => {

                    Toast.clear();
                    let data = result.data.data;
                    let message = result.data.message;
                    if (data) {
                        console.log('AAA', data.belongCompanyName, this.mFromdata);

                        this.mFromdata.stakeholderOrg = data.belongCompanyName;
                        this.mFromdata.stakeholderCode = data.username;
                        this.mFromdata.stakeholderTel = data.preferredMobile;
                        this.mFromdata.stakeholderEmail = data.email;
                        this.mFromdata.stakeholderName = data.truename;
                        this.$forceUpdate();
                    }
                    else {

                        if (jTool.stringIsEmpty(message)) {
                            message = '获取人员信息失败,请稍后重试';
                        }
                        Notify({ type: 'warning', message: message })
                    }
                })
                .catch((error) => {
                    Toast.clear();
                    console.log('bbb', error);

                    Notify({ type: 'warning', message: '获取人员信息失败,请稍后重试' })
                });
        },



        sureButtonClick() {

            let type = this.params.pushType;
            if (type == 'stakeholder' || type == 'partnerInfo' || type == 'contractDeliveryInfo') {

                this.writeDataFromLocalStorage();
            } else {

                this.requestTXPush();
            }
        },


        // 数据存在本地，带到前一个界面
        writeDataFromLocalStorage() {

            let type = this.params.pushType;
            localStorage.setItem(type, JSON.stringify(this.mFromdata));
            this.$router.back();
        },

        // 发起提醒推送
        requestTXPush() {

            Toast.loading({ message: "推送中", forbidClick: false });
            createDICTProjectAccRecordRmind(this.mFromdata)
                .then((result) => {

                    Toast.clear();
                    let status = result.data.status;
                    let message = result.data.message;
                    if (status == 200) {

                        if (jTool.stringIsEmpty(message)) {
                            message = '发起成功';
                        }

                        Toast({ type: 'text', message: message, duration: 1000 });
                        this.$router.back();
                    }
                    else {

                        if (jTool.stringIsEmpty(message)) {
                            message = '请求失败';
                        }

                        Toast({ type: 'text', message: message, duration: 1000 });
                    }
                })
                .catch((error) => {
                    Toast.clear();
                    Notify({ type: 'warning', message: '起草请求失败,请稍后重试' })
                });
        },

    },
};


</script>

<style scoped>
/* @import url();*/
</style>